<template>
    <transition name="upDown" mode="out-in">
        <div class="choseclass" v-if="visible">
            <div class="head">
                <div class="title">班级筛选</div>
                <div class="close" @click.stop="closeClass"></div>
            </div>
            <div class="listbody clearfix scroll">
                <div :class="['item',{'choosen':item.classId == choseClassId}]" v-for="(item,index) in classList" :key="index" @click="chose(item)">
                    {{item.sstClassName}}
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name:"Classchose",
    data(){
        return{
            
        }
    },
    props:{
        visible: Boolean,
        choseClassId: {}
    },
    computed:{
        classList(){
            return this.$parent.classList?this.$parent.classList:[]
        }
    },
    methods:{
        closeClass(){
            this.$emit('update:visible', false);
        },
        chose(item){
            this.$emit('update:choseClassId',item.classId);
            sessionStorage.setItem('choseClassId',item.classId)
            this.closeClass();
            this.$parent.GetUserRanking(11)
            this.$parent.getPlateInfo()
        }
    },
}
</script>

<style lang="scss" scoped>
.choseclass{
    background: #ffffff;
    width: 100%;
    position: fixed;
    bottom: 0;
    border-radius: .4rem .4rem 0 0;
    z-index: 4000;
    .head{
        position: relative;
        width: 100%;
        .title{
            font-size: .3rem; font-weight: bold;
            color: #333333; 
            line-height: .3rem;
            padding: .7rem 0 .3rem .47rem;
        }
        .close{
            position: absolute;
            left: 6.7rem;
            top: .32rem;
            width: .48rem;
            height: .48rem;
            background: url(~@/assets/img/icon/dropdown-close.png) no-repeat;
            background-size: 100% 100%;
        }
    }
    .listbody{
        padding-left: .08rem;
        width: 100%;
        max-height: 6.56rem;
        .item{
            margin: 0 0 .3rem .4rem;
            width: 3.06rem;
            height: .8rem;
            border-radius: .4rem;
            background: #f3f5f7;
            color: #666666;
            text-align: center;
            font-size: .3rem;
            line-height: .8rem;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.choosen{
                background: #82bdae;
                color: #ffffff;
            }
        }
    }
}
</style>
